<template>
  <div>
      <div class="imgs"  :style="{backgroundImage:`url('${pics[1].s_goods_photos[0].path}')`}"> 
          <div class="login">
              <div class="login-css">
                    <input type="text" placeholder="邮箱/手机号码" v-model="phone">
                    <input type="password" placeholder="密码" v-model="password">
                    <div>
                        <p v-show="ps==true">*用户名或密码不正确</p>
                    </div>
                    <button @click="checkphone(phone,password)">立即登录</button>
                    <div><a href="#/enroll">账号注册</a></div>
              </div>
          </div>
      </div>

  </div>
</template>

<script>
import {goods,login} from '../assets/request'

export default {
    data(){
        return{
            pics:[],
            phone:'',
            password:'',
            ps:'flase'

        }
    },
    methods:{
        async checkphone(phone,password){
            const res =  /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g || /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g 
            const respassword =  /^[a-zA-Z]\w{5,17}$/g
            console.log(phone);
            // console.log(res.test(phone));
            console.log(password);
            // console.log(respassword.test(password));
            let flag=false
            if(res.test(phone)&&respassword.test(password)){
                this.ps=false
                flag = true
            }else{
                this.ps=true
            }
            
            if(flag){
                try{
                let ress = await login({
                    phone:this.phone,
                    password:this.password
                })
                }catch{
                    this.ps=true
                }
            }else{
                console.log(1);
            }
           
        }
    },
    async created(){
        let res = await goods({
            project_id:101
        })
        console.log(res);
        this.pics=res.rows.reverse()
    },
    

}
</script>

<style lang='scss' scoped>
    .imgs{
        width: 100%;
        height: 60vh;
        overflow: hidden;
        background-size: 100% auto;
        background-repeat: no-repeat;
        .login{
            background-color: #fff;
            width: 500px;
            margin: 100px 100px 50px auto;
            float: right;
            position: relative;
            padding: 0 20px 30px;
            min-height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            .login-css{
                width: 350px;
                height: 250px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
    }
    input{
        box-sizing: border-box;
        width: 100%;
        height: 42px;
        line-height: 22px;
        padding: 13px 16px 13px 14px;
        display: block;
        margin: 0 auto;
        background: none;
        border: 1px solid grey;

    }
    button{
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: block;
        margin-bottom: 14px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        background: #000;
    }
    p{
        color: red;
    }

    
</style>